<template>
	<view class="app app-bg">
		<view class="card">
			<u-form-item prop="mobile">
				<u-input
					placeholder="请输入绑定手机号"
					v-model="form1.mobile"
					type="number"
					:focus="focus.mobile"
				/>
			</u-form-item>
			<u-form-item prop="code">
				<u-input
					v-model="form1.code"
					type="number"
					:focus="focus.mobileCode"
					:placeholder="$t('setting.please-enter-sms-verification-code')"
				/>
				<vk-data-verification-code
					custom-style="font-size:24rpx;color:#606266"
					ref="mobileCode"
					type="payword"
					seconds="60"
					slot="right"
					:mobile="form1.mobile"
				/>
			</u-form-item>
			<u-form-item prop="payword">
				<u-input
					placeholder="请输入六位数字支付密码"
					v-model="form1.payword"
					maxlength="6"
					type="number"
					:focus="focus.payword"
				/>
			</u-form-item>
			<view class="btn" @click="changePayword">{{ $t("system.confirm") }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: { mobile: "", code: "", payword: null },
			focus: { mobileCode: false, mobile: false, payword: false }
		}
	},
	methods: {
		changePayword() {
			if (!vk.pubfn.test(this.form1.mobile, "mobile")) {
				vk.toast("请输入正确的手机号")
				this.focus.mobile = true
				return false
			}
			if (!vk.pubfn.test(this.form1.code, "code")) {
				vk.toast("请输入正确的验证码")
				this.focus.mobileCode = true
				return false
			}
			if (!vk.pubfn.test(this.form1.payword, "paypwd")) {
				vk.toast("请输入正确的支付密码")
				this.focus.payword = true
				return false
			}
			vk.callFunction({
				url: "client/user.updatePayword",
				title: "修改中...",
				data: this.form1
			}).then(() => {
				vk.alert("修改成功", () => {
					vk.navigateBack()
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.card {
	padding: 30rpx;
	background-color: #ffffff;
}

.btn {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95%;
	height: 70rpx;
	margin: 60rpx auto;
	background-color: var(--main);
	border-radius: 70rpx;
	box-shadow: 0 2rpx 10rpx var(--main);
}

.btn:active {
	filter: grayscale(50%);
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
